<template>
	<!-- 渐变大盒子 -->
	<view class="gradient">
		<!-- 渐变盒子 -->
		<view class="gradient-box">
			<view class="gradient-head">
				<!-- 上 -->
				<view class="head-top">
					<!-- 快递配送  到店自提-->
					<view :class="only == index ? 'head-kd' : 'head-kds'" v-for="(item,index) in lista" :key="index"
						@click="switchs(index)">
						<text class="head-name">{{item.name}}</text>
					</view>
				</view>
				<!-- 添加地址 -->
				<view class="head-dizhi" v-if="only == 0">
					<!-- 有地址的盒子 -->
					<view class="dizhi-bottom" v-if="selectaddress.address" @click="skpi">
						<text class="dizhi-title">{{selectaddress.address.recipient_name}}</text>
						<text class="dizhi-phones">{{selectaddress.address.recipient_mobile}}</text>
						<text class="dizhi-detailss">{{selectaddress.address.alladdres+selectaddress.address.detail_address}}</text>
					
						<!-- 去地址页 -->
						<view class="dizhiye">
							<u-icon name="arrow-right" color="#909399" size="40rpx"></u-icon>
						</view>
					</view>
					<!-- 添加配送地址  没有地址的盒子-->
					<view class="dizhi-top" v-else @click="skpi">
						<u-icon name="plus" color="#979797"></u-icon>
						<text class="dizhi-name">请添加配送地址</text>
					</view>

				</view>
				<!-- 到店自提 -->
				<view class="head-ziti" v-if="only == 1">
					<!-- 联系人 -->
					<view class="contactpeople">
						<text class="people-name">联系人</text>
						<input type="text" class="people" placeholder="请填写联系人姓名">
					</view>
					<!-- 联系电话 -->
					<view class="contactphone">
						<text class="phone-name">联系电话</text>
						<input type="text" class="phone" placeholder="请填写联系电话">
					</view>
				</view>
			</view>
		</view>
		<!-- 快递配送 -->
		<view class="express">
			<!-- 1 标题 -->
			<view class="content-title">
				<u-icon name="calendar" color="#949494" size="30rpx"></u-icon>
				<text class="title-names">灯具商城</text>
			</view>
			<!-- 2 内容 -->
			<view class="content-box" v-for="item in order.list" :key="item.goodsid" @click="tiaozhuan(item.goodsid)">
				<!-- 图片 -->
				<view class="box-image">
					<image :src="item.image_url" mode="" class="box-img"></image>
				</view>
				<!-- 内容 -->
				<view class="box-content">
					<text class="content-one">{{item.name}}</text>
					<text class="content-two">规格：默认</text>
					<text class="content-three">{{item.unit_price}}x{{item.quantity}}</text>
					<!-- 价钱 -->
					<view class="box-price">
						<text class="price-names">￥{{item.quantity*item.unit_price}}</text>
					</view>
				</view>
			</view>
			<!-- 3 优惠券 -->
			<view class="content-coupon">
				<view class="coupon-one">
					<u-icon name="coupon" color="#fd696d" size="30rpx"></u-icon>
					<text>优惠券</text>
				</view>
				<view class="coupon-two">
					<text>暂无优惠券可用</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 4 运费 -->
			<view class="content-cost">
				<text class="cost-text" @click="shows = true">运费</text>
				<text>￥0.00</text>
			</view>
			<!-- 5 买家留言 -->
			<view class="content-liuyan">
				<input type="text" class="liuyan-ipt" placeholder="买家留言">
			</view>
			<!-- 6 小计 -->
			<view class="content-Subtotal">
				<text class="Subtotal-one">共{{orderStore.allcount}}件</text>
				<text class="Subtotal-two">小计:￥{{orderStore.total}}</text>
			</view>
			<!-- 空盒子 -->
			<view class="emptyy">

			</view>
		</view>

		<!-- 弹出层-->
		<view class="">
			<u-popup v-model="show" mode="center" border-radius="20" :mask-close-able="false" >
				<view class="ball">
					<!-- 支付方式 -->
					<view class="way">
						<text class="way-name">支付方式</text>
						<u-icon name="close" @click="closeclick(selectaddress.address.id)" class="way-icon" size="40rpx" color="#cdcdcd">
						</u-icon>
					</view>
					<!-- 支付金额 -->
					<view class="Paymentamount">
						<text class="Paymentamount-name">支付金额{{orderStore.total}}.00元</text>
					</view>
					<!-- 支付选项 -->
					<view class="option">
						<!-- 余额支付 -->
						<view class="yu">
							<view class="yu-box">
								<view class="yu-img">
									<image src="../../static/images/yuer.png" mode="" class="yu-image"></image>
								</view>
								<view class="yu-zhifuu">
									<text class="yu-zhifu">余额支付</text>
									<text class="yu-zhifus">账户余额不足</text>
								</view>
							</view>
							<view class="yu-Recharge">
								<text>去充值</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<!-- 微信支付 -->
						<view class="wx">
							<view class="wx-box">
								<view class="wx-img">
									<image src="../../static/images/weixinzhif.png" mode="" class="wx-image"></image>
								</view>
								<text class="wx-zhifu">微信支付</text>
							</view>
							<view class="wx-icon">
								<icon type="success" color="#ff4544"></icon>
							</view>
						</view>
					</view>
					<!-- 提交订单 -->
					<view class="orders" @click="paynow(selectaddress.address.id)">
						<text class="orders-name">立即支付</text>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 提交订单 -->
		<view class="place-order">
			<!-- 合计 -->
			<view class="total">
				<text class="total-span">合计:￥</text>
				<text class="total-name">{{orderStore.total}}</text>
			</view>
			<!-- 提交 -->
			<view class="Submit">
				<view class="Submit-box" @click="Submitorders()">
					<text class="Submit-name">提交订单</text>
				</view>
			</view>
		</view>
		<!-- 弹出 -->
		<view>
			<u-popup v-model="shows">
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';

  import {
    orderUserStore
  } from "../../store/order.js"
  const  orderStore= orderUserStore()
  const {order} = orderStore
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  const {selectaddress} = addressStore

	const lista = reactive([{
		name: '快递配送'
	}, {
		name: '到店自提'
	}])
	const shows = ref(false)
	// 点谁换谁
	const only = ref(0)
	// 切换
	const switchs = (index) => {
		only.value = index
	}
	// 弹出层
	const show = ref(false)
	// 有地址和没地址
	const unique = ref(false)

	//取消支付
	const closeclick = (addressid) => {
		show.value = false
		
    //提交订单未支付
    orderStore.submitorder(addressid,"unpaid")
    uni.showToast({
    	title: '取消支付中...',
    	duration: 1000,
    	icon: 'loading'
    })
    uni.navigateTo({
       url: `/subPack/Allorder/Allorder?index=1`
    })
   
	}
  //定义id
const  goods_id = ref("")
  //定义数量
const  goodcount = ref("")
	// 跳转到收货地址
	const skpi = () => {
		const isunique = ref(true)
		uni.navigateTo({
			url: `/subPack/Address/Address?value=${true}&goods_id=${goods_id.value}&goodcount=${goodcount.value}`
		})
	}

	onLoad((option) => {
   if(option.goods_id && option.goodcount ){
     goods_id.value = option.goods_id
     goodcount.value = option.goodcount
       //发送请求获取订单
      const data = {
         "id":option.goods_id,
         "count":option.goodcount
       }
       orderStore.getorder(data)
   }else{
     //获取购物车选中订单信息
     orderStore.getcart()
   }
	})
  //跳转详情
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }

//提交订单
function Submitorders(){
  show.value = true
}
//支付
function paynow(addressid){
  
   //提交订单待发货
   orderStore.submitorder(addressid,"paid")
   uni.showToast({
   	title: '支付成功',
   	duration: 1000,
   	icon: 'success'
   })
   uni.navigateTo({
     url: `/subPack/Allorder/Allorder?index=2`
   })
}


</script>


<style lang="scss" scoped>
	.gradient {
		width: 100%;
		height: 1400rpx;
		// border: 1px solid red;
		background-color: #f7f7f7;


		// 渐变的大盒子
		.gradient-box {
			width: 100%;
			height: 320rpx;
			// border: 1px solid red;
			background-image: linear-gradient(#ff0000, #f7f7f7);
			display: flex;
			align-items: center;
			justify-content: center;

			// 快递配送和到店自提的盒子
			.gradient-head {
				width: 95%;
				height: 260rpx;
				// border: 1px solid red;
				background-color: #fff;
				border-radius: 5px;

				// 快递配送和到店自提的盒子
				// 上
				.head-top {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					// border: 1px solid red;
					display: flex;
					text-align: center;

					// 切换
					.head-kd {
						width: 50%;
						height: 60rpx;

						// border: 1px solid red;
						.head-name {
							color: black;
						}
					}

					.head-kds {
						width: 50%;
						height: 60rpx;
						background-color: #ffecec;
						border-radius: 5px;

						// border: 1px solid red;
						.head-name {
							color: black;
						}
					}
				}

				// 添加地址
				.head-dizhi {
					width: 100%;
					height: 200rpx;

					// border: 1px solid red;
					// 没地址
					.dizhi-top {
						width: 100%;
						height: 200rpx;
						line-height: 200rpx;
						// border: 1px solid red;
						text-align: center;

						.dizhi-name {
							font-size: 16px;
						}
					}

					// 有地址
					.dizhi-bottom {
						width: 100%;
						height: 200rpx;
						// border: 1px solid red;
						padding-top: 50rpx;
						padding-left: 20rpx;
						position: relative;

						.dizhi-title {
							font-size: 17px;
						}

						.dizhi-phones {
							color: #999999;
							padding-left: 30rpx;
						}

						.dizhi-detailss {
							display: block;
							font-size: 14px;
							padding-top: 10rpx;
						}

						.dizhi-detailed {
							display: block;
							font-size: 14px;
						}

						// 地址页
						.dizhiye {
							width: 40rpx;
							height: 40rpx;
							// border: 1px solid red;
							position: absolute;
							top: 40%;
							right: 20rpx;
						}
					}

				}

				// 到店自提
				.head-ziti {
					width: 100%;
					height: 200rpx;
					// border: 1px solid red;

					// 联系人
					.contactpeople {
						width: 95%;
						height: 100rpx;
						line-height: 100rpx;
						// border: 1px solid red;
						border-bottom: 1px solid #e5e5e5;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.people-name {
							font-size: 17px;
						}

						.people {
							width: 300rpx;
							height: 50rpx;
							// border: 1px solid red;
							text-align: right;
						}
					}

					// 联系电话
					.contactphone {
						width: 95%;
						height: 100rpx;
						line-height: 100rpx;
						// border: 1px solid red;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.phone-name {
							font-size: 17px;
						}

						.phone {
							width: 300rpx;
							height: 50rpx;
							// border: 1px solid red;
							text-align: right;
						}
					}

				}
			}
		}

		// 快递配送
		.express {
			width: 95%;
			// height: 650rpx;
			// border: 1px solid red;
			margin: 0 auto;
			border-radius: 5px;
			background-color: #fff;

			// 标题
			.content-title {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				// border: 1px solid red;
				padding-left: 20rpx;

				.title-names {
					font-size: 32rpx;
					font-weight: 600;
					padding-left: 10rpx;
				}
			}

			// 内容
			.content-box {
				width: 100%;
				// height: 200rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				display: flex;
				position: relative;

				// 图片
				.box-image {
					width: 240rpx;
					height: 200rpx;
          margin: 15rpx;
        
					// border: 1px solid red;	

					.box-img {
						width: 100%;
						height: 99%;
					}
				}

				// 内容
				.box-content {
					// width: 300rpx;
					width: 100%;
					height: 200rpx;
          position: relative;
					// border: 1px solid red;
					padding-left: 20rpx;
					.content-one {
						display: block;
						font-size: 32rpx;
						padding-top: 20rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
					}

					.content-two {
						display: block;
						font-size: 30rpx;
						color: #999999;
            position: absolute;
             bottom: 40rpx;
					}
					.content-three {
            position: absolute;
             bottom: -15rpx;
						display: block;
	    font-size: 26rpx;
						color: #999999;
						padding-top: 10rpx;
					}
				}

				// 价钱
				.box-price {
					width: 120rpx;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					position: absolute;
					bottom: -20rpx;
					right: 20rpx;


					.price-names {
						font-size: 16px;
					}
				}
			}

			// 优惠券
			.content-coupon {
				width: 100%;
				height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				display: flex;

				.coupon-one {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					padding-left: 20rpx;
				}

				.coupon-two {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					display: flex;
					justify-content: flex-end;
					padding-right: 15rpx;
					color: #999999;
				}
			}

			// 运费
			.content-cost {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
           
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
         color: #ff4544;
				.cost-text {
               color: #1a1a1a;
					font-size: 16px;
				}
			}

			// 留言
			.content-liuyan {
				width: 100%;
				height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;

				.liuyan-ipt {
					width: 100%;
					height: 100rpx;
					// border: 1px solid red;
					padding-left: 20rpx;
				}
			}

			// 小计
			.content-Subtotal {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid red;
				display: flex;
				justify-content: flex-end;
				padding-right: 20rpx;

				.Subtotal-one {
					font-size: 14px;
					color: #999999;
					padding-right: 10rpx;
				}
        .Subtotal-two {

        color: #ff4544;
  
        }
			}

			// 空盒子
			.emptyy {
				width: 95%;
				height: 120rpx;
			}
		}

		// 到店自提
		.store {
			width: 95%;
			height: 650rpx;
			// border: 1px solid red;
			margin: 0 auto;
			border-radius: 5px;
			background-color: #fff;

			// 标题
			.content-title {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				// border: 1px solid red;
				padding-left: 20rpx;

				.title-names {
					font-size: 16px;
					font-weight: 600;
					padding-left: 10rpx;
				}
			}

			// 内容
			.content-box {
				width: 100%;
				height: 200rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				display: flex;
				position: relative;

				// 图片
				.box-image {
					width: 240rpx;
					height: 200rpx;
					// border: 1px solid red;	

					.box-img {
						width: 100%;
						height: 99%;
					}
				}

				// 内容
				.box-content {
					// width: 300rpx;
					width: 100%;
					height: 200rpx;
					// border: 1px solid red;
					padding-left: 20rpx;

					.content-one {
						display: block;
						font-size: 16px;
						padding-top: 20rpx;
					}

					.content-two {
						display: block;
						font-size: 13px;
						color: #999999;
						padding-top: 50rpx;
					}

					.content-three {
						display: block;
						font-size: 13px;
						color: #999999;
						padding-top: 10rpx;
					}
				}

				// 价钱
				.box-price {
					width: 120rpx;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					position: absolute;
					bottom: 0;
					right: 20rpx;


					.price-names {
						font-size: 16px;
					}
				}
			}

			// 优惠券
			.content-coupon {
				width: 100%;
				height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				display: flex;

				.coupon-one {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					padding-left: 20rpx;
				}

				.coupon-two {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					// border: 1px solid red;
					display: flex;
					justify-content: flex-end;
					padding-right: 15rpx;
					color: #999999;
				}
			}

			// 运费
			.content-cost {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;

				.cost-text {
					font-size: 16px;
				}
			}

			// 留言
			.content-liuyan {
				width: 100%;
				height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;

				.liuyan-ipt {
					width: 100%;
					height: 100rpx;
					// border: 1px solid red;
					padding-left: 20rpx;
				}
			}

			// 小计
			.content-Subtotal {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid red;
				display: flex;
				justify-content: flex-end;
				padding-right: 20rpx;

				.Subtotal-one {
					font-size: 14px;
					color: #999999;
					padding-right: 10rpx;
				}
			}

			// 空盒子
			.emptyy {
				width: 95%;
				height: 120rpx;
			}
		}

		// 弹出层
		.ball {
			width: 660rpx;
			height: 650rpx;

			// 支付方式
			.way {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid red;
				border-bottom: 1px solid #e2e2e2;
				text-align: center;

				.way-name {
					font-size: 18px;
				}

				.way-icon {
					position: relative;
					left: 200rpx;
				}
			}

			// 支付金额
			.Paymentamount {
				width: 100%;
				height: 150rpx;
				line-height: 150rpx;
				// border: 1px solid red;
				text-align: center;

				.Paymentamount-name {
					font-size: 17px;
					font-weight: 600;
				}
			}

			// 支付选项
			.option {
				width: 100%;
				height: 260rpx;
				// border: 1px solid red;

				.yu {
					width: 90%;
					height: 130rpx;
					// border: 1px solid red;
					// border-bottom: 1px solid #e2e2e2;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.yu-box {
						// width: 300rpx;
						height: 100rpx;
						// border: 1px solid red;
						display: flex;

						.yu-img {
							width: 75rpx;
							height: 75rpx;

							.yu-image {
								width: 100%;
								height: 100%;
							}
						}

						.yu-zhifuu {
							width: 300rpx;
							height: 100rpx;
							// border: 1px solid red;
							margin-left: 20rpx;

							.yu-zhifu {
								font-size: 34rpx;
								display: block;
							}

							.yu-zhifus {
								font-size: 25rpx;
								display: block;
								color: #999999;
							}
						}
					}

					.yu-Recharge {
						// width: 150rpx;
						height: 100rpx;
						line-height: 80rpx;
						// border: 1px solid red;
						color: #ff6f6e;
					}
				}

				.wx {
					width: 90%;
					height: 130rpx;
					line-height: 130rpx;
					// border: 1px solid red;
					margin: 0 auto;
					display: flex;
					// justify-content: center;
					align-items: center;
					justify-content: space-between;

					.wx-box {
						width: 300rpx;
						height: 100rpx;
						line-height: 90rpx;
						// border: 1px solid red;
						display: flex;

						.wx-img {
							width: 80rpx;
							height: 80rpx;
							// border: 1px solid red;

							.wx-image {
								width: 100%;
								height: 100%;
							}
						}

						.wx-zhifu {
							font-size: 34rpx;
							padding-left: 20rpx;
						}
					}

					.wx-icon {
						height: 100rpx;
						line-height: 100rpx;
						// border: 1px solid red;
						text-align: center;
					}
				}

			}

			// 提交
			.orders {
				width: 90%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				// border: 1px solid red;
				margin: 0 auto;
				border-radius: 25px;
				background-color: #ff4544;

				.orders-name {
					color: #fff;
					font-size: 18px;
				}
			}
		}

		// 下单
		.place-order {
        color: #ff4544;
			width: 100%;
			height: 120rpx;
			// border: 1px solid red;
			border-top: 1px solid #f7f7f7;
			position: fixed;
			bottom: 0;
			display: flex;
			background-color: #fff;

			// 合计
			.total {
				width: 75%;
				height: 120rpx;
				line-height: 120rpx;
				// border: 1px solid red;
				padding-left: 20rpx;

				.total-span {
					font-size: 14px;
				}

				.total-name {
					font-size: 25px;
					font-weight: 600;
				}
			}

			// 提交
			.Submit {
				width: 50%;
				height: 120rpx;
				// border: 1px solid red;
				display: flex;
				justify-content: center;
				align-items: center;
				.Submit-box {
                
					width: 240rpx;
			      line-height: 70rpx;
					line-height: 70rpx;
					// border: 1px solid red;
					border-radius: 50px;
					text-align: center;
         background-color: #ff4544;
					.Submit-name {
						color: #fff;
         
						font-size: 35rpx;
					}
				}
			}
		}
	}
</style>